<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
		<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
		<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
		<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
		<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
	</head>
	<body>
		<div class="container">
			<div class="row">
				<div>
					<h1>简单的赛场管理
						<small>裁判评分</small>
					</h1>
				</div>
				<div id="app">
					<form action="set-score.php" method="get">
						
					
					<table class="table table-condensed">
						<thead>
							<tr>
								<th>选手号</th>
								<th>选手姓名</th>
								<th>分数</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody>
							<tr v-for="(item,index) in list">
								<td>{{item.id}}</td>
								<td>{{item.name}}</td>
								<td v-if="item.score">{{item.score}}</td>
								<td  v-else><input name="score" type="text"></td>
								<td v-if="item.score"></td>
								<td v-else><input type="submit" class="btn btn-default" value="评分"></td>
							</tr>
						</tbody>
					</table>
					</form>
				</div>
			</div>
		</div>

	</body>
	<script type="text/javascript">
		new Vue({
					el: "#app",
					data() {
						return {
							list: null
						}
					},
					mounted() {
						axios
							.get('./score-list.php')
							.then(response => {
								console.log(this)
								this.list = response.data
							})
							.catch(function(error) {
								console.log(error);
							});
					}
					});
	</script>
</html>
